youtube
With CSS anchor(), overlaying and connecting UI elements has never been easier. The Over-Easy Machine shows how a few lines of CSS can make position relative and top/left a thing of the past. Combine the Over-Easy machine with Popovers for a truly remarkable and accessible overlay experience. By the end, you'll know the basics of anchor() and how to show, hide, and transition Popovers.
Chapters:
0:00 - Introduction
0:32 - anchor() overview
1:11 - Over-Easy Machine
2:12 - Over-Easy Hover Popover
6:18 - Over-Easy Toggle Tip Popover
8:55 - Future of Popover
9:47 - Outro
Resources:
Anchor
Introducing the CSS anchor positioning API →
MDN anchor() →
Una's anchor tool →
Popover
Popover API lands in Baseline →
MDN popover →
Demos
Over-Easy →
Over-Easy Hover Popover →
Over-Easy Toggle Tip →
Caniuse
anchor() →
position-visibility →
position-try-order →
position-try-fallbacks →
Watch more Mini Web Machines →
Subscribe to Chrome for Developers →
#ChromeForDevelopers #Chrome
Speaker: Adam Argyle
|
2024/09/04
youtube
